<template>
  <div
    class="product-card bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer border border-gray-200 dark:border-gray-700"
    @click="goToDetail"
  >
    <!-- 商品图片 -->
    <div class="product-image relative">
      <el-image
        :src="product.image"
        class="w-full aspect-square object-cover"
        fit="cover"
      />
      <div class="discount-tag" v-if="product.discount">
        <span
          class="bg-red-500 text-white px-2 py-1 text-xs absolute top-2 right-2 rounded"
        >
          {{ product.discount }}折
        </span>
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="product-info p-4">
      <h3
        class="product-title text-gray-900 dark:text-gray-100 font-medium mb-2 line-clamp-2 hover:text-primary-600 dark:hover:text-primary-400"
      >
        {{ product.title }}
      </h3>

      <!-- 价格区域 -->
      <div class="price-section flex items-center mb-3">
        <span
          class="current-price text-red-600 dark:text-red-400 text-xl font-bold"
          >¥{{ product.price }}</span
        >
        <span
          class="original-price text-gray-400 dark:text-gray-500 text-sm line-through ml-2"
          v-if="product.originalPrice"
        >
          ¥{{ product.originalPrice }}
        </span>
      </div>

      <!-- 销量和评分 -->
      <div
        class="stats flex items-center text-sm text-gray-500 dark:text-gray-400 mb-3"
      >
        <span>销量 {{ product.sales }}</span>
        <span class="mx-2">|</span>
        <div class="flex items-center">
          <el-rate
            :model-value="product.rating"
            disabled
            size="small"
            allow-half
            class="mr-1"
          />
          <span>{{ product.rating }}</span>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="actions flex gap-2" @click.stop>
        <el-button type="danger" size="small" @click="goToDetail">
          立即购买
        </el-button>
        <el-button
          type="warning"
          size="small"
          @click="$emit('add-to-cart', product)"
        >
          加入购物车
        </el-button>
        <el-button
          :type="product.isFavorite ? 'primary' : 'default'"
          size="small"
          @click="$emit('favorite', product)"
        >
          <el-icon><Star /></el-icon>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Star } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

export default {
  name: "ProductCard",
  components: {
    Star,
  },
  props: {
    product: {
      type: Object,
      required: true,
    },
  },
  emits: ["favorite", "add-to-cart", "buy-now"],
  setup(props) {
    const router = useRouter();

    const goToDetail = () => {
      console.log("跳转到商品详情页，商品ID:", props.product.id);
      router
        .push({
          path: `/shop/product/${props.product.id}`,
        })
        .catch((err) => {
          console.error("路由跳转错误:", err);
        });
    };

    return {
      goToDetail,
    };
  },
};
</script>

<style scoped>
.product-title {
  height: 3em;
  line-height: 1.5;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 防止按钮区域继承卡片的hover效果 */
.actions {
  cursor: default;
}

/* 夜间模式下的hover效果 */
.product-card:hover {
  @apply shadow-lg dark:shadow-gray-700/50;
}
</style>
